<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:insert="app :: appheader"></head>
<link rel="stylesheet" href="/css/home.css">
<script src="/js/home.js"></script>
<body>

<div class="page">
    <!--引用公共的页面头部-->
    <div class="page-header" th:include="app :: pageheader"></div>

    <!--每个同学自己在page-content写东西-->
    <div class="page-content">

        <!--左边区域：博客文章-->
        <div class="left-panel panel">

            <!--列表内容-->
            <div class="article" th:each="blog,blogs:${blogs}">
                <div class="article-left">
                    <img class="icon"
                         th:src="${blog.getImage()!=null?'/blog-images/'+blog.getImage():'/images/暂无图片.svg'}">
                </div>

                <div class="article-right">
                    <div class="article-info">
                        <span th:text="${blog.getFlag()}">分类</span>

                        <span th:text="${#dates.format(blog.getUpdateTime(), 'yyyy年MM月dd日')}">发布于：2012-12-01</span>
                    </div>
                    <a class="article-title" th:text="${blog.getTitle()}"
                       th:href="@{'/blog/'+${blog.getId()}}">文章标题</a>
                    <p class="article-des" th:text="${blog.getDescription()}">文章描述</p>
                </div>
            </div>


            <div class="pagination">

                <th:block th:if="${currentPage!=1}">
                    <button class="paginator-btn jump" th:onclick="'pageSkip('+${currentPage-1}+')'"> 上一页</button>
                </th:block>

                <div class="paginator">

                    <button class="paginator-btn more" th:if="${navigators[0]>1}">...</button>

                    <th:block th:each="i,navigators:${navigators}">
                        <button class="paginator-btn" th:classappend="${currentPage==i} ? 'actived' : ''"
                                th:onclick="'pageSkip('+${i}+')'">
                            <span th:text="${i}">页码</span>
                        </button>
                    </th:block>

                    <button class="paginator-btn more" th:if="${(pageCount-navigators[navigators.size()-1])>0}">...
                    </button>

                </div>

                <th:block th:if="${currentPage!=pageCount}">
                    <button class="paginator-btn jump" th:onclick="'pageSkip('+${currentPage+1}+')'">下一页</button>
                </th:block>

            </div>
        </div>

        <!--右边区域：头像，排行榜等-->
        <div class="right-panel panel">
            <div class="read-rank box">
                <h3 class="title">阅读排行榜</h3>
                <a class="rank-item" th:each="blog,recommendBlogTop:${recommendBlogTop}"
                   th:href="@{'/blog/'+${blog.getId()}}">
                    <span th:text="${(recommendBlogTop.index + 1)+'、'}">序号</span>
                    <span th:text="${blog.getTitle()}">标题</span>
                    <span th:text="${blog.getViews()==null?'（0）':'（'+blog.getViews()+'）'}">阅读量</span>
                </a>
            </div>

            <div class="person-info box">
                <h3 class="title">DISI</h3>
                <img class="avatar" src="/images/avatar.png">
                <p class="name">
                    SpringBoot
                </p>
                <p class="description">

                </p>

            </div>

            <div class="contact box">
                <h3 class="title">联系方式</h3>

                <a class="approach" href="https://github.com" target="_blank">
                    <img src="/images/github.svg">
                </a>

                <a class="approach" href="https://weibo.com" target="_blank">
                    <img src="/images/weibo.png">
                </a>
            </div>

        </div>

    </div>

</div>

</body>

</html>